<template>

    <div class="operator_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>财务</el-breadcrumb-item>
            <el-breadcrumb-item>合作商管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="operator_list_card">

            <!-- title -->
            <el-row class="title font18">
                <el-col>合作商管理</el-col>
                <el-col class="inner">
                    <el-button class="add_btn" @click="add_operator_list" type="primary">添加合作商</el-button>
                </el-col>
            </el-row>

            <!-- 对话框 -->
            <el-dialog close="operator_list_dialog" title="财务结算" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

                <!-- 表单 -->
                <el-form style="padding-top: 30px;" class="my_form" :rules="rules" :model="ruleForm" ref="ruleForm" label-width="100px">
                    <el-form-item label="未结算金额：" prop="region">
                        <span>￥20815.32</span>
                    </el-form-item>

                    <el-form-item label="结算金额：" prop="refund_num">
                        <el-input style="width: 95%" placeholder="请输入结算金额，不能大于未结算金额" v-model="ruleForm.refund_num"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirm_balance">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 主体内容 -->
            <div class="operator_content">

                <!-- 表格 -->
                <el-table class="operator_list_table" :data="tableData.slice((page-1)*limit,page*limit)" style="width: 100%" border>

                    <el-table-column prop="company" label="公司名称">
                    </el-table-column>

                    <el-table-column prop="count" sortable label="发布数量">
                    </el-table-column>

                    <el-table-column prop="name" label="负责人姓名">
                    </el-table-column>

                    <el-table-column prop="mobile" label="负责人电话">
                    </el-table-column>

                    <el-table-column prop="create_time" sortable label="添加时间">
                    </el-table-column>

                    <el-table-column prop="last_time" sortable label="上次结算时间">
                    </el-table-column>

                    <el-table-column prop="unsettled" sortable label="未结算金额">
                    </el-table-column>

                    <!--<el-table-column prop="custom_service_num" label="分配客服数">-->
                    <!--</el-table-column>-->

                    <el-table-column prop="status" label="账号状态">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status_text" disabled>
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="360">
                        <div class="edit_box" slot-scope="scope">
                            <span class="edit" @click="edit(scope.row.id)">修改</span>
                            <span class="see_balance" @click="see_order">查看订单</span>
                            <span class="edit" @click="balance(scope.row.id, scope.row.unsettled)">结算</span>
                            <span class="see_balance" @click="balance_record">结算记录</span>
                        </div>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页器 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total, prev, pager, next" :total="count">
            </el-pagination>

        </el-card>
    </div>

</template>

<script src='../../../static/js/operator/operator_list.js'></script>

<style scoped>
@import "../../../static/css/operator/operator_list.css";
</style>


